<template>
  <div class="container" v-if="show">
    <div class="left">
      <div class="left-top">
        <div class="img">
          <img :src="data.coverImgUrl" alt="" />
        </div>
        <div class="end">
          <div class="title">
            <i></i>
            <div class="tit">
              <h2>
                {{ data.name }}
              </h2>
            </div>
          </div>
          <div class="user">
            <a href="" class="userpic">
              <img :src="authorpic" alt="" />
            </a>
            <span class="username">
              <router-link :to="'/user/' + data.userId">
                {{ author }}
              </router-link>
              <img class="vip" :src="icon" alt="" />
            </span>

            <span class="time">{{ time }}&nbsp;创建</span>
          </div>
          <div class="play">
            <a href="" class="music-play">
              <i>
                <em></em>
                播放
              </i>
            </a>
            <a href="" class="add"></a>
            <a href="" class="store">
              <i>({{ msg.bookedCount }})</i>
            </a>
            <a href="" class="send">
              <i>({{ msg.shareCount }})</i>
            </a>
            <a href="" class="send">
              <i class="download">下载</i>
            </a>
            <a href="" class="send">
              <i class="msg">({{ msg.commentCount }})</i>
            </a>
          </div>
          <div class="tip">
            <b>标签：</b>
            <a href="" v-for="(item, index) in tags" :key="index">
              <i>{{ item }}</i>
            </a>
          </div>
          <p class="message">
            <b>介绍：</b>

            {{ data.description }}
          </p>
        </div>
      </div>
      <div class="contentsong">
        <div class="list">
          <h3>
            歌曲列表
            <span>{{ data.trackCount }}首歌</span>
          </h3>
          <span>
            播放:
            <a href="">{{ data.playCount }}次</a>
          </span>
        </div>
        <div class="songtable">
          <table>
            <thead>
              <tr>
                <th class="first"></th>
                <th class="title">
                  <div>歌曲标题</div>
                </th>
                <th class="time">
                  <div>时长</div>
                </th>
                <th class="songer">
                  <div>歌手</div>
                </th>
                <th class="album">
                  <div>专辑</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in songs" :key="index">
                <td class="table-left">
                  <span style="color: #999">{{ index + 1 }}</span>
                  <span
                    v-show="falg"
                    @click="geturl(item.id, index)"
                    class="table-play"
                  ></span>
                  <span
                    v-show="!falg"
                    @click="geturl(item.id, index)"
                    style="background-position: -20px -128px"
                    class="table-play"
                  ></span>
                </td>
                <td>
                  <div class="songss">
                    <a href="javascript:;" @click="geturl(item.id, index)">{{
                      item.name
                    }}</a>
                    <!--                                     <span class='songcolor'>-({{item.alias}})</span>-->
                  </div>
                </td>
                <td>{{ songtime[index] }}</td>
                <td>{{ al[index].al.name }}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
        {{ this.$store.state['song/open'] }}
      </div>
      <div class="left-footer">
        <div class="more">
          <p>查看更多内容，请下载客户端</p>
          <a href="">立即下载</a>
        </div>
        <div class="list">
          <h3>
            评论
            <span>共{{ total }}条评论</span>
          </h3>
        </div>
        <div class="comments">
          <div class="userimg">
            <img
              v-if="!this.$store.state.user.show"
              width="50"
              height="50"
              src="http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
              alt=""
            />
            <img
              v-else
              width="50"
              height="50"
              :src="this.$store.state.user.avatarUrl"
              alt=""
            />
          </div>
          <div class="input">
            <textarea
              v-model="value"
              @click="shouinput"
              placeholder="评论"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
            <div class="inputicon">
              <div>
                <a href=""></a>
                <a href=""></a>
              </div>
              <button @click="send">评论</button>
            </div>
          </div>
        </div>
        <div class="usercommts">
          <div class="goodcommts">
            <h4>最新评论</h4>
          </div>

          <ul class="userhot">
            <li v-for="(item, index) in hotuser" :key="index">
              <div class="comm-left">
                <router-link :to="'/user/' + item.user.userId">
                  <img
                    width="50"
                    height="50"
                    v-lazy="item.user.avatarUrl"
                    alt=""
                  />
                </router-link>
              </div>
              <div class="comm-right">
                <div class="comm-righttop">
                  <router-link :to="'/user/' + item.user.userId">
                    <a href="">{{ item.user.nickname }}:</a>
                  </router-link>
                  <span>{{ item.content }}</span>
                </div>
                <div class="comm-bottommsg">
                  <div class="usertime" style="color: #999">
                    {{ usertime[index] }}
                  </div>
                  <div class="userset">
                    <a href=""></a>
                    <span v-if="item.likedCount !== 0"
                      >({{ item.likedCount }})</span
                    >
                    <b>|</b>
                    回复
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--  右边部分-->
    <div class="right">
      <h3 v-show="like.length !== 0">喜欢这个歌单的人</h3>
      <ul class="header">
        <li v-for="(item, index) in like" :key="index">
          <a href="">
            <router-link :to="'/user/' + like[index].userId">
              <img width="40" height="40" v-lazy="item.avatarUrl" alt="" />
            </router-link>
          </a>
        </li>
      </ul>
      <h3 style="margin-top: 20px">相关推荐</h3>
      <div class="recommend">
        <ul>
          <li v-for="(item, index) in comments" :key="index">
            <div class="userimg">
              <img
                width="50px"
                height="50px"
                v-lazy="item.coverImgUrl"
                alt=""
              />
            </div>
            <div class="recontent">
              <router-link :to="item.id">
                <div @click="end(item.id)">
                  {{ item.name }}
                </div>
              </router-link>
              <div>
                <span style="margin-right: 5px">by</span>
                <router-link :to="'/user/' + item.creator.userId">
                  {{ item.creator.nickname }}
                </router-link>
                <img
                  width="13px"
                  height="13px"
                  src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4761340159/e2c1/6fb5/f49b/353e6d1857f7c5f46426beb533427e53.png"
                  alt=""
                />
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="move">
        <p>更多音乐多端下载</p>
        <ul>
          <li>
            <a class="ios" href=""></a>
          </li>
          <li style="width: 116px">
            <a class="pc" href=""></a>
          </li>
          <li>
            <a class="android" href=""></a>
          </li>
        </ul>
        <span>同步歌单，随时畅听320k好音乐</span>
      </div>
    </div>
  </div>

  <div class="gif" v-else>
    <img class="gif" src="@/assets/gif/1474.gif" alt="" />
  </div>
</template>
<script>
import axios from 'axios'
import config from '@/network/config'
import moment from 'moment'
import Login from '@/views/Login/Login'
export default {
  name: 'Content',
  components: {
    'v-login': Login,
  },
  data() {
    return {
      show: false,
      falg: true,
      url: config.url,
      data: [],
      msg: [],
      tags: [],
      author: '',
      authorpic: '',
      icon: '',
      time: '',
      songs: '',
      songtime: [],
      al: '',
      hotuser: [],
      usertime: [],
      total: 0,
      like: [], //喜欢本歌单的人
      comments: [], //获取相关推荐歌单,
      urlid: '',
      value: '', ///评论
    }
  },
  methods: {
    shouinput() {}, //打开评论框事件
    // 发送评论
    send() {
      axios
        .get(`${this.url}/comment?t=1&type=2`, {
          params: {
            id: this.$route.params.id,
            content: this.value,
          },
          withCredentials: true,
        })
        .then((res) => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message.success('发送成功')
          } else if (res.data.code == 250) {
            this.$message.error('发布太快啦,休息一下叭')
          } else {
            this.$message.error('发送失败')
          }
          this.value = ''
        })
    },
    end(id) {
      this.getrecommend() //获取相关推荐歌单
      this.getdata()
      this.getmessage()
      this.commenton()
    }, //相关推荐跳转
    getdata() {
      axios
        .get(`${this.url}/playlist/detail?`, {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.data = res.data.playlist
          this.al = res.data.playlist.tracks
          this.tags = res.data.playlist.tags
          this.author = res.data.playlist.creator.nickname
          this.authorpic = res.data.playlist.creator.avatarUrl
          this.time = moment(res.data.playlist.createTime).format('YYYY-MM-DD')
          this.songs = res.data.playlist.tracks //获取歌名
          var list = []
          res.data.playlist.tracks.forEach((item) => {
            list.push(item.dt)
          })
          for (let i = 0; i < 10; i++) {
            this.songtime.push(moment(list[i]).format('mm:ss'))
          }
          var arr = res.data.playlist.creator.avatarDetail
          if (arr !== null) {
            this.icon = arr.identityIconUrl
          } else {
            this.icon == ''
          }
          this.like = res.data.playlist.subscribers
        })
    },
    getmessage() {
      axios
        .get(`${this.url}/playlist/detail/dynamic?`, {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.msg = res.data
        })
    },
    commenton() {
      axios
        .get(`${this.url}/comment/playlist?`, {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.total = res.data.total
          var list = []
          this.hotuser = res.data.comments
          res.data.comments.forEach((item) => {
            list.push(item.time)
          })
          for (let i = 0; i < list.length; i++) {
            this.usertime.push(moment(list[i]).format('YYYY-MM-DD HH:mm'))
          }
        })
    }, //        获取相关推荐
    getrecommend() {
      axios
        .get(`${this.url}/related/playlist?`, {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          this.comments = res.data.playlists
          // console.log(res.data.playlists)
        })
    },
    getname(n) {
      return this.songs[n].name
    },

    geturl(id, i) {
      axios.get(`${this.url}/cloudsearch?keywords=${id}`).then((res) => {
        this.$store.commit('song/getpic', res.data.result.songs[0].al.picUrl) //把图片地址存到 x
      })
      // 获取音乐 url 传如 vuex
      axios
        .get(`${this.url}/song/url?`, {
          params: {
            id,
          },
        })
        .then((res) => {
          var url = res.data.data[0].url
          if (url !== null) {
            this.$store.commit('song/getsong', url)
          } else {
            this.$router.push('/error')
          }
        })

      //判断音乐是否可用
      axios
        .get(`${this.url}/check/music?`, {
          params: {
            id,
          },
        })
        .then((res) => {
          if (res.data.message !== 'ok') {
            this.$message.error('暂无版权')
          }
        })
      this.$store.state['song/name'] = this.getname(i)
    },
  },
  // 小人物出现
  created() {
    setTimeout(() => {
      this.show = true
    }, 1000)
  },
  mounted() {
    this.getrecommend() //获取相关推荐歌单
    this.getdata()
    this.getmessage()
    this.commenton()

    // console.log(moment(1616062621083).format('YYYY-MM-DD HH:mm'))
  },
  updated() {
    // this.getrecommend()
    // this.getdata()
  },
}
</script> 

<style scoped lang="less">
/* gif  */
.gif {
  width: 100%;
  display: flex;
  height: 700px;
  align-items: center;
  justify-content: center;
  background: white;
  img {
    width: 50px;
    height: 50px;
  }
}

.left li:last-child {
  border-bottom: none;
  margin-bottom: 10px;
}

.recontent a,
span {
  text-wrap: normal;
}

.recontent span {
  color: #999;
  font-size: 12px;
}

.recontent a {
  color: #666;
}

.recontent {
  overflow: hidden;
  text-overflow: ellipsis;
}

.recontent > a {
  font-size: 14px;
  color: #000000;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recontent {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.recommend .userimg {
  margin-top: 10px;
  margin-right: 10px;
}

.recommend ul li {
  display: flex;
}

.recommend {
  width: 200px;
}

.right .header {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  justify-content: space-evenly;
  margin-top: 10px;
}

.right .header li {
  width: 40px;
  height: 40px;
  padding-right: 10px;
  padding-top: 10px;
}

.right h3 {
  height: 23px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 12px;
  font-weight: lighter;
  width: 200px;
  padding: 12px 0 12px 0;
  margin-bottom: 5px;
}

.right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userset a {
  color: #999;
  display: inline-block;
  width: 15px;
  height: 14px;
  margin-right: 10px;
  background: url('../../../assets/images/icon2.png') -150px 0;
}

.userset b {
  color: #999;
  margin: 0 5px;
}

.userset {
  position: absolute;
  right: 0;
  display: flex;
  bottom: 0;
  align-items: center;
}

.comm-bottommsg {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.comm-right span {
  font-size: 12px;
}

.comm-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
  width: 100%;
  overflow: hidden;
}

.userhot > li {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 10px;
  font-size: 12px;
}

/*精彩评论*/
.usercommts {
  width: 650px;
}

.usercommts h4 {
  font-size: 12px;
  font-weight: lighter;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
}

/*精彩评论*/
.inputicon a:nth-child(1) {
  width: 18px;
  height: 18px;
  background-position: -40px -490px;
  margin-right: 10px;
}

.inputicon a:nth-child(2) {
  width: 18px;
  height: 18px;
  background-position: -60px -490px;
}

.inputicon a {
  display: block;
  background: url('../../../assets/images/icon.png');
  width: 18px;
}

.inputicon {
  height: 18px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.inputicon button:hover {
  background-position: -84px -94px;
  color: #fff;
  text-decoration: none;
}

.inputicon button {
  background: url('../../../assets/images/button.png') -84px -64px;
  width: 46px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  border: none;
  outline: none;
  color: white;
}

.inputicon > div {
  display: flex;
}

.comments textarea {
  resize: none;
  outline: none;
  width: 578px;
  height: 63px;
  border: 1px solid #ccc;
}

.comments {
  display: flex;
  position: relative;
}

/*品论部分*/
.userimg {
  margin-right: 20px;
}

/*用户头像*/
.left-footer .list {
  display: flex;
  align-items: center;
  height: 33px;
  border-bottom: 2px solid #c20c0c;
  justify-content: space-between;
  margin-right: 30px;
  margin-bottom: 20px;
}

.more a {
  margin-top: 10px;
  width: 120px;
  height: 30px;
  background-image: linear-gradient(90deg, #ff5a4c 0%, #ff1d12 100%);
  border-radius: 18px;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}

.more p {
  font-size: 13px;
  color: #333333;
}

.more {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: 30px;
}

/*更多内容*/
tbody tr:nth-child(odd) {
  background: #f7f7f7;
}

.songss {
  width: 100%;
  height: 30px !important;
  display: flex;
  align-items: center;
}

.songss a {
  display: block;
  white-space: nowrap;
}

td a:hover {
  text-decoration: underline;
}

td {
  overflow: hidden;
  height: 30px !important;
  white-space: nowrap;
}

/* 表格信息*/
table .first {
  width: 74px;
}

.table-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

td .table-play:hover {
  background-position: 0 -128px;
}

td .table-play {
  background: url('../../../assets/images/table.png') 0 -103px;
  width: 17px;
  height: 17px;
}

table td {
  padding: 6px 10px;
  line-height: 18px;
  text-align: left;
}

th > div {
  background: url('../../../assets/images/table.png') 0 -56px no-repeat;
  padding: 8px 10px;
  font-weight: normal;
  color: #666;
}

table .title {
  width: 237px;
}

table th {
  height: 38px;
  color: #666;
  font-size: 12px;
  text-align: left;
  background: url('../../../assets/images/table.png') 0 0;
}

.songtable table {
  width: 650px;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}

/*表格*/
.list span {
  font-size: 12px;
  color: #666666;
}

.list span a {
  font-size: 12px;
  color: #c20c0c;
}

.list h3 span {
  margin: 9px 0 0 5px;
  color: #666;
  font-size: 0.5rem;
}

.list h3 {
  font-size: 20px;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.contentsong .list {
  display: flex;
  align-items: center;
  height: 33px;
  border-bottom: 2px solid #c20c0c;
  justify-content: space-between;
  margin-right: 30px;
}

.contentsong {
  margin-top: 27px;
  display: flex;
  flex-direction: column;
}

/*歌曲部分*/
.end .message {
  margin-top: 4px;
  line-height: 18px;
  color: #666;
  font-size: 12px;
}

/*介绍*/
.end .tip i {
  background: url('../../../assets/images/button2.png') 0 0;
  float: left;
  height: 22px;
  line-height: 22px;
  position: relative;
  zoom: 1;
  padding: 0 3px 0 13px;
  cursor: pointer;
  font-style: normal;
  font-weight: lighter;
}

.end .tip a {
  background: url('../../../assets/images/button2.png') right -27px;
  margin: 0px 10px 3px 0;
  padding: 0 10px 0 0;
  text-shadow: 0 1px #fdfdfd;
  color: #777;
  text-decoration: none;
  cursor: pointer;
}

.end .tip {
  margin: 25px 0 5px;
  line-height: 22px;
  display: flex;
  align-items: center;
}

.end .tip b {
  float: left;
  font-weight: normal;
  color: #666;
  font-size: 12px;
  margin-top: -5px;
}

/*标签*/
.send .msg {
  background-position: 0 -1465px !important;
}

.send .download {
  background-position: 0 -2761px !important;
}

.send i {
  height: 31px;
  min-width: 37px !important;
  cursor: pointer;
  background-position: 0 -1225px !important;
  color: #666666 !important;
  padding-left: 22px;
  text-align: center;
}

.send {
  background-position: right -1020px !important;
  margin-right: 6px;
  padding: 0 5px 0 0;
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 58px;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 3px;
}

/*转发*/
.play .store i {
  background-position: 0 -977px;
  padding-right: 2px;
  padding-left: 28px;
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
  color: #333;
}

i {
  background: url('../../../assets/images/button2.png');
  color: #333;
  float: left;
  line-height: 30px;
  cursor: pointer;
  width: auto;
}

.play .store {
  margin-right: 6px;
  font-family: simsun, \5b8b\4f53;
  background-position: right -1020px;
  padding: 0 5px 0 0;
  white-space: nowrap;
  color: #333;
  text-decoration: none;
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
}

/*收藏*/
.play .add {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
  padding: 0 5px 0 0;
  white-space: nowrap;
  color: #333;
  text-decoration: none;
  width: 31px;
  margin-left: -3px;
  background-position: 0 -1588px;
  font-family: simsun, \5b8b\4f53;
  margin-right: 5px;
}

/* 加号*/
.play em {
  background: url('../../../assets/images/button2.png') 0 -1622px;
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 0px 2px 0;
  overflow: hidden;
  font-style: normal;
  text-align: left;
  font-size: inherit;
}

.play i {
  background: url('../../../assets/images/button2.png');
  float: left;
  overflow: hidden;
  cursor: pointer;
  font-style: normal;
  font-size: inherit;
}

.music-play i {
  color: white;
  padding: 0 7px 0 8px;
  text-indent: 0.3rem;
  background-position: 0 -387px;
  line-height: 31px;
}

.play .music-play {
  background-position: right -428px;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  width: 66px;
  height: 31px;
}

.play > a {
  background: url('../../../assets/images/button2.png');
}

.play {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  margin-right: -10px;
  height: 31px;
  flex-wrap: wrap;
}

/*play*/
.user > span {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  margin-right: 15px;
}

/**/
.username a {
  font-size: 12px;
  color: #0c73c2;
  white-space: nowrap;
}

.username {
  width: 72px;
  display: flex;
  align-items: center;
}

.end .userpic {
  margin-right: 10px;
  width: 35px;
  height: 35px;
}

.userpic img {
  width: 35px;
  height: 35px;
}

.end .user {
  margin: 0 0 20px;
  line-height: 35px;
  display: flex;
  position: relative;
  align-items: center;
}

/**/
.title .tit {
  margin-left: 10px;
}

.title .tit > h2 {
  line-height: 24px;
  font-size: 20px;
  word-break: break-word;
  white-space: normal;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

.end .title i {
  width: 54px;
  height: 24px;
  background: url('../../../assets/images/icon.png') 0 -243px;
}

.end .title {
  margin: 0 0 12px;
  width: 100%;
  display: flex;
}

.end {
  width: 410px;
  margin-left: 20px;
}

/* 主题上部分右边*/

.left-top .vip {
  border: none;
  width: 13px;
  margin-left: 5px;
}

.left-top .img img {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 2px;
}

.left-top {
  width: 100%;
  display: flex;
}

/*<!--左边部分-->*/

.left {
  width: 680px;
  z-index: 2;
  margin-top: 47px;
  margin-left: 30px;
}

.right {
  width: 270px;
  height: 100px;
}

.container {
  width: 980px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  background: url('../../../assets/images/wrap4.png');
}

a {
  font-size: 12px;
}

.time {
  margin-left: 30px;
}
.songss a {
  color: #333;
}
// 右边更多音乐下载
.move {
  width: 100%;
  padding: 10px 34px;
  box-sizing: border-box;
  p {
    font-size: 0.5rem;
    text-align: left !important;
    border-bottom: 1px solid #c2c2c2;
    padding-bottom: 10px;
    
  }
  span{
    color: #999;
    font-size: 12px;
    cursor: pointer;
  }
  ul {
    height: 65px;
    margin-bottom: 10px;
    background: url(../../../assets/images/sprite.png) 0 -392px;
    margin-top: 20px;
    display: flex;
    li {
      .ios {
        display: block;
        width: 42px;
        height: 48px;
        text-indent: -9999px;
        &:hover {
          background: url(../../../assets/images/sprite.png) 0 -472px no-repeat;
        }
      }
      .pc {
        display: block;
        width: 60px;
        height: 48px;
        text-indent: -9999px;
        margin: 0 26px 0 30px;
        cursor: pointer;
        &:hover {
          background: url(../../../assets/images/sprite.png) -72px -472px
            no-repeat;
        }
      }
      .android {
        display: block;
        width: 42px;
        height: 48px;
        text-indent: -9999px;
        cursor: pointer;
        &:hover {
          background: url(../../../assets/images/sprite.png) -158px -472px;
        }
      }
    }
  }
}
</style>